<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开通存管</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
</head>
<body>
<form id="userForm" action="./trans/users?requestNo=${consumer.requestNo}" method="post">
    <div class="content confirmStorage">
        <div class="tabBar" title="">确认开通存管</div>
        <div class="labTitle">您正在使用银行存管系统开户功能</div>
        <div class="cardsBlock">
            <div class="item">
                <div class="lab">证件类型</div>
                <input class="uni-input" value="身份证" disabled="" focus placeholder="身份证"/>
            </div>
            <div class="item">
                <div class="lab">客户姓名</div>
                <input class="uni-input" value="${consumer.fullname}" disabled="" placeholder="请输入本人姓名，核实后不可修改"/>
            </div>
            <div class="item clborder">
                <div class="lab ">证件号</div>
                <input class="uni-input" value="${consumer.idNumber}" disabled="" focus
                       placeholder="请输入本人证件号码，核实后不可修改"/>
            </div>
        </div>
        <div class="labTitle">温馨提示：若银行卡为二类账户，将会影响提现，具体账户类型
            可咨询发卡行
        </div>
        <div class="cardsBlock">
            <div class="item">
                <div class="lab">银行卡</div>
                <#if consumer.bankName?exists>
                    <input class="uni-input" value="${consumer.bankName}(${consumer.cardNumber})" disabled="" placeholder="请输入本人储蓄卡卡号"/>
                <#else>
                    <input class="uni-input" style="color: red" value="银行卡信息错误" disabled="" placeholder="请输入本人储蓄卡卡号"/>
                 </#if>
            </div>
            <div class="item">
                <div class="lab">手机号</div>
                <input class="uni-input" value="${consumer.mobile}" disabled="" placeholder="请输入银行预留手机号"/>
            </div>
            <div class="item clborder" style="display: none;">
                <div class="lab">验证码</div>
                <input class="uni-input" focus placeholder="请输入验证码"/>
                <div class="getCode" onclick="">获取验证码</div>
            </div>
        </div>
        <div class="cardsBlock">
            <div class="item">
                <div class="lab">交易密码</div>
                <input class="uni-input" id="prePassword" name="prePassword" type="password" focus placeholder="请输入存管系统交易密码"/>
            </div>
            <div class="item clborder">
                <div class="lab">确认交易密码</div>
                    <input class="uni-input" id="password" name="password" type="password" focus placeholder="请再次输入存管系统交易密码"/>
            </div>
        </div>
        <div id="tipDiv" class="labTitle" style="color: #ff0000;">
            <#if !consumer.bankName?exists>
                开户信息错误
            </#if>
        </div>
        <div class="labTitle">
            银行存管系统不承担网贷平台的投融资标的物及投融资人的审核责
            任，不对网贷平台业务提供明示或模示的担保或连带责任，网
            贷平台的交易风险由投融资人自行承担，与银行无关。
        </div>
        <label class="labTitlebox"><input id="agreeRadio" type="checkbox" class="redioCk"/><span>我同意《用户服务协议》《风险提示》</span></label>
        <div class="itBut">
            <input type="hidden" name="userNo" value="${consumer.userNo}"/>
            <input type="hidden" name="fullname" value="${consumer.fullname}"/>
            <input type="hidden" name="mobile" value="${consumer.mobile}"/>
            <input type="hidden" name="idNumber" value="${consumer.idNumber}"/>
            <input type="hidden" name="bankCode" value="${consumer.bankCode!}"/>
            <input type="hidden" name="bankName" value="${consumer.bankName!}"/>
            <input type="hidden" name="cardNumber" value="${consumer.cardNumber}"/>
            <input type="hidden" name="appCode" value="${consumer.appCode}"/>
            <input type="hidden" name="role" value="${consumer.role}"/>
            <input type="hidden" name="authList" value=""/>
            <input type="hidden" name="callbackUrl" value="${consumer.callbackUrl!}"/>
            <#if consumer.bankName?exists>
                <input type="button" class="submitBut" onclick="personalRegister()" value="确认协议并注册"/>
            <#else>
            <input type="submit" disabled="" class="submitBut" value="确认协议并注册"/>
            </#if>
        </div>
    </div>
</form>
<script>
    function personalRegister() {
        var tipDiv = document.getElementById("tipDiv");
        if ("${consumer.bankName!''}" == "") {
            tipDiv.innerText = "开户信息错误";
            return;
        }
        if (document.getElementById("password").value == "") {
            tipDiv.innerText = "请输入交易密码";
            return;
        }
        if (document.getElementById("password").value != document.getElementById("prePassword").value) {
            tipDiv.innerText = "两次交易密码不一致";
            return;
        }
        if (document.getElementById("agreeRadio").checked == false) {
            tipDiv.innerText = "请同意协议内容";
            return;
        }
        tipDiv.innerText = "";
        document.getElementById("userForm").submit();
    }
</script>
<style>
    body, html {
        margin: 0;
        padding: 0;
    }

    .content {
        max-width: 750px;
        width: 100%;
        font-size: 14px;
    }

    .tabBar {
        position: relative;
        color: #999;
        text-align: center;
        line-height: 40px;
        box-shadow: 0 2px 2px #e2e2e2;
        width: 100%;
        margin-bottom: 10px;
    }

    .tabBar .goBack {
        font-size: 22px;
        position: absolute;
        left: 15px;
    }

    input {
        border: none;
        width: 100%;
        border-radius: 3px;
        padding: 0 10px;
    }

    .cardsBlock {
        padding: 15px;
        margin: 10px 15px;
        border-radius: 5px;
        font-size: 12px;
        -webkit-box-shadow: 0 0 5px #e2e2e2;
        box-shadow: 0 0 5px #e2e2e2;
    }

    .confirmStorage .labTitle {
        margin-top: 15px;
        font-size: 12px;
        margin: 5px 20px 0px 20px;
        color: #999;
    }

    .confirmStorage .item {
        display: flex;
        border-bottom: solid 1px #e2e2e2;
        line-height: 29px;
        font-size: 14px;
        padding: 10px 0px;


    }

    .confirmStorage .item .lab {
        width: 100px;
    }

    .confirmStorage .item .uni-input {
        flex: 1;
    }

    .confirmStorage .itBut {
        margin: 10px auto;
        width: 86%;
    }

    .confirmStorage .redioCk {
        width: 20px;
        position: relative;
        top: 2px;
    }

    .confirmStorage .getCode {
        background: linear-gradient(130deg, #8a8fef, #4f57eb);;
        color: #fff;
        padding: 2px 10px;
        border-radius: 5px;
    }

    .submitBut {
        background: linear-gradient(130deg, #8a8fef, #4f57eb);
        padding: 5px 0px;
        line-height: 2;
        border-radius: 50px;
        width: 100%;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        text-align: center;
        color: #fff;
    }

    .labTitlebox {
        display: block;
        padding: 0 15px 40px;
        color: #1a90fe;
    }
</style>
</body>
</html>